<template>
  <div style="width: 100%; height: 100%">
    <!-- tools -->
    <div class="tools flex">
      <!-- tools left box -->
      <div class="tools__left  flex-left  pl-2">
        <el-input style="max-width: 500px; height: 40px">
          <template #prepend>
            <div>手机号查询</div>
          </template>
          <template #append>
            <el-icon>
              <Search></Search>
            </el-icon>
          </template>
        </el-input>
      </div>
      <div class="w-1/2 h-full flex-right"> <el-button size="large" style="margin-right: 2rem;"
          @click="OnClickAddUser = true">新增</el-button> </div>


      <el-dialog v-model="OnClickAddUser" title="添加用户" width="650" style="padding: 2rem;">

        <el-form style="max-width: 600px" status-icon label-width="auto" class="demo-ruleForm">
          <el-form-item label="用户名">
            <el-input v-model="ruleForm.userid" />
          </el-form-item>
          <el-form-item label="用户昵称">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="账号">
            <el-input v-model="ruleForm.number" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="ruleForm.pass" autocomplete="off" />
          </el-form-item>
          <el-form-item label="负责项目">
            <el-input v-model="ruleForm.project" />
          </el-form-item>
          <el-form-item label="隶属单位">
            <el-input v-model="ruleForm.belong" />
          </el-form-item>
        </el-form>


        <template #footer>
          <div class="dialog-footer">
            <el-button @click="OnClickAddUser = false" type="primary">添加</el-button>
            <el-button type="danger" @click="OnClickAddUser = false"> 关闭 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    <div class="content flex items-center p-4">
      <UserUserlist></UserUserlist>
    </div>

  </div>
</template>

<script lang="ts" setup>
definePageMeta({
  layout: "mangment",
});
const tableData = [
  {
    username: '名字',
    name: 'Tom',
    phonenumber: '11111111111',
    project: 'Alibaba',
    time: '2016-05-03',
    belong: 'Alibaba Group',
    action: ''

  },

]
const OnClickAddUser = ref(false)

const ruleForm = reactive({
  pass: '',
  checkPass: '',
  number: '',
  userid: '',
  name: '',
  project: '',
  belong: ''

})
const input = ref('')
</script>

<style lang="scss" scoped>
@mixin block($block) {
  .#{$block} {
    @content;
  }
}

@mixin element($element) {
  &__#{$element} {
    @content;
  }
}

@mixin modifier($modifier) {
  &--#{$modifier} {
    @content;
  }
}

@include block(tools) {
  width: 100%;
  height: 86px;
  display: flex;
  @apply p-2 gap-2;

  @include element(left) {
    flex: 1;
  }

  @include element(right) {
    padding-right: 2rem;
  }
}

@include block(content) {
  width: 100%;
  height: 85%;
  display: flex;
  justify-content: center;
  align-items: start;

}
</style>
